<template>
  <view class="wrap">
    <uv-navbar :fixed="false" :title="title" autoBack safeAreaInsetTop placeholder :border='false'></uv-navbar>
    <view class="bigTitle">选择报名身份</view>
    <view class="box">
      <view class="list">
        <template v-for="(item,index) in list" :key='index'>
          <view class="item" :class="{ noFlex: item.child && item.child.length }" @click="check(item)">
            <view class="name">{{ item.name }}</view>
            <template v-if="!item.child">
              <image src="../../static/checkon.png" class="select" v-if="active.includes(item.id)"></image>
              <image src="../../static/checkoff.png" class="select" v-else></image>
            </template>
            <template v-if="item.child && item.child.length">
              <view class="list">
                <view class="item" v-for="(dt,idx) in item.child" @click.stop="check(dt)">
                  <view class="name">{{ dt.name }}</view>
                  <image src="../../static/checkon.png" class="select" v-if="active.includes(dt.id)"></image>
                  <image src="../../static/checkoff.png" class="select" v-else></image>
                </view>
              </view>
            </template>
          </view>
        </template>
      </view>
    </view>
    <view class="footer">
      <button class="btn" hover-class="none" @click="next">下一步</button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { toast } from '@/common';

const list = ref([
  { id: 1, name: '公募基金' },
  { id: 2, name: '险资机构' },
  { id: 3, name: '券商自营及资产管理' },
  { id: 99, name: '私募基金', child: [
    { id: 4, name: '证券投资类私募' },
    { id: 5, name: '股权投资类私募' },
    { id: 6, name: '创业投资类私募' },
    { id: 7, name: '其他类私募' },
    { id: 8, name: '未备案投资私募' },
  ] },
  { id: 9, name: '产业资本' },
  { id: 10, name: 'QFII和QFII机构' },
  { id: 11, name: '其他机构投资者' },
  { id: 12, name: '卖方分析师' },
  { id: 13, name: '上市公司高管' },
  { id: 14, name: '券商投资顾问' },
  { id: 15, name: '财经记者' },
  { id: 16, name: '高净值个人' },
  { id: 17, name: '私董会成员' },
  { id: 18, name: '公募基金与险资机构免费' },
  { id: 19, name: '公募险资和私董会成员不受名额限制' }
])
let active = ref([]);
let title = ref('');
let type = '';

onLoad((option) => {
  title.value = option.index == 3 ? '发调研' : '策略会&活动';
  type = option.index;
})

function next(){
  if(!active.value.length) return toast('请选择身份');
  if(type == 3){
    uni.redirectTo({
      url: `/pages/invest/meeting?ids=${active.value.toString()}`
    });
  }else{
    uni.redirectTo({
      url: `/pages/invest/meeting2?ids=${active.value.toString()}`
    });
  }
}
function check(row){
  if(row.id == 99) return;
  let index = active.value.findIndex(o => o == row.id);
  if(index >= 0){
    active.value.splice(index, 1);
  }else{
    active.value.push(row.id);
  }
  console.log(active.value);
}
</script>

<style lang="scss" scoped>
  .safe{
    width: 100%;
    height: 208rpx;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .btn{
      font-size: 34rpx;
    }
  }
  .box{
    background-color: #fff;
    width: 100%;
    padding: 0 30rpx;
    .list{
      .item{
        height: 110rpx;
        line-height: 110rpx;
        border-bottom: 1px solid #E6E6E6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &:last-child{
          border-bottom: 0;
        }
        &.noFlex{
          display: block;
          height: auto;
          .list .item{
            height: 90rpx;
            line-height: 90rpx;
            border-bottom: 0;
            .name{
              font-weight: 400;
              font-size: 30rpx;
              color: #2B2B2B;
              padding-left: 20rpx;
            }
          }
        }
        .select{
          width: 40rpx;
          height: 40rpx;
          font-size: 0;
        }
        .name{
          font-weight: 500;
          font-size: 32rpx;
          color: #2B2B2B;
        }
      }
    }
  }
  .bigTitle{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    padding: 0 30rpx;
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>